<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>thymeleaf demo</title>
</head>
<script type="text/javascript" th:src="@{/static/jquery.js}"></script>
<body>

<form>
    <input type="text" id="data">
    <input type="button" id="btn" value="请求数据"/>
</form>

<hr>

<div style="text-align: center;">
    <input type="button" id="order_btn" value="显示数据" style="height: 40px;border: coral"/>
    <table border="1" style="margin: auto;width: 60%">
        <thead>
        <tr>
            <th class="asd">商品编号</th>
            <th class="asd">订单名称</th>
            <th class="asd">时间</th>
            <th class="asd">状态</th>
            <th class="asd">操作</th>
        </tr>
        </thead>
        <tbody id="tbMain"></tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $("#data").val("thymeleaf and jsp demo");

        $("#btn").click(function () {
            getData();
        });

        $("#order_btn").click(function () {
            getData2();
        });
    });

    function getData() {
        var data = $("#data").val();
        $.ajax({
            url: "http://localhost:8080/springboot/util/selectUtilData",
            type: "GET",
            data: {data: data},
            success: function (res) {
                // var json = JSON.stringify(res.data);
                alert(res.data.time);
            },
            error: function () {
                alert("error");
            },
            dataType: "json"
        });
    }

    function getData2() {
        $.ajax({
            url: "http://localhost:8080/springboot/getInfo",
            type: "GET",
            success: function (res) {
                reader(res.data);
            },
            error: function () {
                alert("error");
            },
            dataType: "json"
        });
    }

    function reader(rows) {
        $("#tbMain").html("");
        for (var i = 0; i < rows.length; i++) {
            var r = rows[i];
            var s = "<tr>";
            s += "<td style='background-color: aquamarine'>" + r.orderId + "</td>";
            s += "<td>" + r.orderName + "</td>";
            s += "<td>" + r.createTime + "</td>";
            if (r.status == 1)
                s += "<td>已支付</td>";
            else
                s += "<td>未支付</td>";
            s += "<td><input type='button' value='详情' onclick='doShow(" + r.orderId + ")' /></td>";
            s += "</tr>";
            $("#tbMain").append($(s));
        }
    }

    function doShow(orderId) {
        alert("订单Id为：" + orderId);
    }
</script>
</html>